<script setup lang="ts">
import type { Props, Emits } from './utils/types'
import APIUploadMaterial from '@/api/upload-material'
import ItemMusicSelect from '@/components/ItemMusicSelect/index.vue'
import { Close } from '@element-plus/icons-vue'
const dialogVisible = shallowRef(false)
const $props = defineProps<Props>()
const $emit = defineEmits<Emits>()

watch($props, (newValue) => {
    dialogVisible.value = newValue.modelValue
    if (dialogVisible.value) {
        getBgMusicList()
    }

}, { immediate: true })

watch(dialogVisible, (newValue) => {
    $emit('update:modelValue', newValue)
})

function onBeforeClose() {
    dialogVisible.value = false
}

const bgMusicList = ref<any[]>([])

function getBgMusicList() {
    APIUploadMaterial.getBgMusicList().then(({ data }) => {
        bgMusicList.value = data
    })
}

function getMusicId(id: number) {
    $emit('update:getBgMusic', id)
    onBeforeClose()
}

function handleClose() {
    onBeforeClose()
}
</script>

<template>
    <el-dialog class="select-music" v-model="dialogVisible" title="" width="1125" destroy-on-close
        :before-close="onBeforeClose" :show-close="false" top="8vh">
        <div class="title">
            <div class="left">
                <img src="./images/check-circle.png" alt="check-circle">
                <p>选择视频背景音乐</p>
            </div>
            <div class="right">
                <el-icon :size="34" color="#9A9A9A" style="cursor: pointer;" @click="handleClose">
                    <Close />
                </el-icon>
            </div>
        </div>
        <div class="music-list">
            <el-empty description="暂无内容" v-if="bgMusicList && bgMusicList.length == 0" style="margin-top: 60px;" />
            <ItemMusicSelect v-for="item in bgMusicList" :key="item.id" :item="item" @get-music-id="getMusicId" />
        </div>
    </el-dialog>
</template>

<style lang="scss">
div.select-music {
    div.el-dialog {
        div.el-dialog__body {
            padding: 0 !important;
        }
    }
}
</style>

<style lang="scss" scoped>
.select-music {

    .music-list {
        padding: 10px 38px;
        height: 500px;
    }

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(187, 187, 187, 1);

        .right {
            display: flex;
            align-items: center;
        }

        .left {
            display: flex;
            align-items: center;

            img {
                width: 24px;
                height: 24px;
                display: block;
            }

            p {
                color: rgba(249, 20, 20, 1);
                font-size: 18px;
                font-weight: 700;
                margin-left: 10px;
            }
        }
    }

}
</style>


<style lang="scss">
.select-music {
    padding: 0;
    border-radius: 10px;

    .el-dialog__header {
        padding: 0;
    }
}
</style>
